import React from 'react';

class H1 extends React.Component {
  // 用于更新页面的数据
  state = {
    num: 0
  };
  // 自定义数据
  timer = -1;
  // 挂载时
  componentDidMount() {
    this.timer = setInterval(() => {
      let { num } = this.state;
      num++;
      this.setState({ num });
      console.log(num);
    }, 1000);
  }
  // 卸载时
  componentWillUnmount() {
    // 卸载的时候清除定时器
    clearInterval(this.timer);
  }
  render() {
    return <h1>{this.state.num}</h1>;
  }
}


class App extends React.Component {

  state = {
    show: true
  };

  changeShow = () => {
    this.setState({ show: !this.state.show });
  };

  render() {
    return <div>
      <button onClick={this.changeShow}>条件渲染</button>
      {this.state.show && <H1></H1>}
    </div>;
  }

}

export default App;
